import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import {
  Table, Grid, Menu, Segment, Icon, Button, Header, Checkbox,
} from 'semantic-ui-react'
import DefaultButton from 'components/Button'
import { TableRow, OptionIcon, OptionImage } from 'components/memberTable'
import { listTable as listTableDuck } from 'ducks'
import Page from './pagination'
import List from './list'
import Sort from './sort'
import Search from './search'
import Nav from './nav'
import Avatar from './avatar'
import Action from './action'
import Holder from './holder'
import Time from './time'
import Link from './link'
import Row from './row'
import Loading from './loadingCell'

class ListTableView extends Component {
  componentWillUnmount = () => {
    const { actionReset } = this.props
    actionReset()
  }

  render() {
    const {
      nav,
      search,
      sort,
      globalActions,
      pagination,
      listData,
      isEmpty,
      holder,
      link,
      extraAction,
      subscription,
    } = this.props
    return (
      <Grid>
        {nav && (
          <Grid.Row>
            <Grid.Column>
              <Nav {...nav} />
            </Grid.Column>
          </Grid.Row>
        )}
        {(search || sort || globalActions) && (
          <Grid.Row>
            <Grid.Column>
              <Menu secondary>
                {globalActions && (
                  <React.Fragment>
                    {globalActions.map(action => (
                      <Menu.Item fitted>
                        <DefaultButton onClick={() => link(action.url)}>
                          {action.text}
                        </DefaultButton>
                      </Menu.Item>
                    ))}
                    {extraAction && <Menu.Item fitted>{extraAction}</Menu.Item>}
                  </React.Fragment>
                )}
                {(search || sort) && (
                  <Menu.Menu position="right">
                    {search && (
                      <Menu.Item fitted>
                        <Search icon="search" placeholder={search.text} size="medium" />
                      </Menu.Item>
                    )}
                    {sort && (
                      <Menu.Item fitted>
                        <Sort />
                      </Menu.Item>
                    )}
                  </Menu.Menu>
                )}
              </Menu>
            </Grid.Column>
          </Grid.Row>
        )}
        <Grid.Row>
          <Grid.Column>
            <List
              header={listData.header}
              holder={holder}
              query={listData.query}
              variables={listData.variables}
              search={search}
              sort={sort}
              subscription={subscription}
            >
              {listData.render}
            </List>
          </Grid.Column>
        </Grid.Row>
        {pagination && (
          <Grid.Row style={{ marginBottom: '4em' }}>
            <Page
              query={pagination.query}
              variables={pagination.variables}
              queryName={pagination.name}
              search={search}
            />
          </Grid.Row>
        )}
      </Grid>
    )
  }
}

const mapStateToProps = state => ({
  isEmpty: listTableDuck.selectors.isEmpty(state),
})

const mapDispatchToProps = {
  link: url => push(url),
  actionReset: listTableDuck.creators.actionReset,
}

const ListTable = connect(
  mapStateToProps,
  mapDispatchToProps,
)(ListTableView)

ListTable.Header = ({ hasCheckBox, children }) => (
  <Table.Header>
    {hasCheckBox && (
      <Table.HeaderCell>
        <Checkbox />
      </Table.HeaderCell>
    )}
    {children}
  </Table.Header>
)
ListTable.HeaderCell = Table.HeaderCell

ListTable.Row = Row
ListTable.Body = Table.Body
ListTable.Cell = Table.Cell
ListTable.Avatar = Avatar
ListTable.Action = Action
ListTable.Page = Page
ListTable.Link = Link
ListTable.Time = Time
ListTable.Loading = Loading

export default ListTable
